<style type="text/css">
    .tk-upper {
        text-align: center;
        display: block;
        width: 100%;
        clear: both;
        font-size: x-large;
        color: black;
        margin-top: 6.5px;
    }

    .tt1 {
        margin-top: 32px;
    }

    .tt2 {
        margin-top: 4px;
    }

    .tk-upper .tahukahkamu {
        font-size: 1.67em; /* 24px */
        font-weight: bolder;
        color: black;        
        font-family: Serif;
    }

    .tk-upper .jumlahkab {
        font-size: 1em; /* 20px */
        font-weight: bolder;
        font-family: Serif;
        color:darkorange;
    }

    .tk-upper .kenapa {
        font-size: 1em; /* 20px */
        font-family: Serif;
        font-weight: bolder;
        color: red;
    }

    .page .content {
        background-color: #FFE;
        padding: 0px;
    }

    .content-container {
        margin: 0;
    }

    .tk-map {
        text-align: center;
        display: block;
        width: 100%;
        height: 289px;
        /* background-image: url("<?php echo res_url("img/indonesia map 800px.png"); ?>"); */
        background-size: 100%;
        clear: both;
    }

    .tk-catatan {
        display: block;
        clear: both;
        width: 700px;
        font-size: x-small;
        margin: 0px auto;
        color: #777;
        margin-top: 7px;
    }

    .tk-lower {
        padding-bottom: 3em;
    }

    .side-left {
        width: 650px;
        display: inline-block;
        vertical-align: top;
        padding-right: 1em;
        margin-left: 1em;
    }

    .side-right {
        width: 270px;
        display: inline-block;
        vertical-align: top;
    }
</style>
<div class="tk-map"><div id="map"></div></div>
<div class="tk-upper">
    <div class="tt2">
        saat ini
        <span class="jumlahkab"><?php echo count($kabList); ?> Kabupaten</span> di Indonesia
        sedang <span class="kenapa">berjuang meningkatkan taraf kesehatan.<sup>*</sup></span>
    </div>
</div>
<div class="tk-catatan">*) daerah tertinggal dengan Indeks Pembangunan Manusia (IPM) dan Angka Harapan Hidup (AHH) dibawah standar nasional.</div>
<hr style="margin:1em; margin-top: 2em;" />
<div class="tk-lower">
    <div class="side-left">
        <div class="title" style="margin-bottom: 0.3em;">Terbaru</div>
        <div class="beritabox">
            <ul>
                <li><b><a href="#tab-kr">Kabar Relawan</a></b></li>
                <li><b><a href="#tab-berita">Berita</a></b></li>
                <li><b><a href="#tab-publikasi">Publikasi</a></b></li>
            </ul>
            <div id="tab-kr" style="padding-top: 0.9em;" class="hidden">
                <div class="listBerita">
                </div>
                <div style="text-align: right; width: 100%;margin-top: 1.6em;margin-bottom: -0.1em;">
                    Halaman :
                    <a href="#tab-terbaru" onClick="javascript: $('#tab-terbaru .page-cur').text(parseInt($('#tab-terbaru .page-cur').text()) - 1);
                            changePage('terbaru');" class="page-prev"><<</a>
                    <span class="page-cur">1</span>
                    <a href="#tab-terbaru" onClick="javascript: $('#tab-terbaru .page-cur').text(parseInt($('#tab-terbaru .page-cur').text()) + 1);
                            changePage('terbaru');" class="page-next">>></a>
                </div>
            </div>
            <div id="tab-berita" style="padding-top: 0.9em;" class="hidden">
                <div class="listBerita">
                </div>
                <div style="text-align: right; width: 100%;margin-top: 1.6em;margin-bottom: -0.1em;">
                    Halaman :
                    <a href="#tab-terbaru" onClick="javascript: $('#tab-terbaru .page-cur').text(parseInt($('#tab-terbaru .page-cur').text()) - 1);
                            changePage('terbaru');" class="page-prev"><<</a>
                    <span class="page-cur">1</span>
                    <a href="#tab-terbaru" onClick="javascript: $('#tab-terbaru .page-cur').text(parseInt($('#tab-terbaru .page-cur').text()) + 1);
                            changePage('terbaru');" class="page-next">>></a>
                </div>
            </div>
            <div id="tab-publikasi" style="padding-top: 0.9em;">
                <div class="listBerita">
                </div>
                <div style="text-align: right; width: 100%;margin-top: 1.6em;margin-bottom: -0.1em;">
                    Halaman :
                    <a href="#tab-terbaru" onClick="javascript: $('#tab-terbaru .page-cur').text(parseInt($('#tab-terbaru .page-cur').text()) - 1);
                            changePage('terbaru');" class="page-prev"><<</a>
                    <span class="page-cur">1</span>
                    <a href="#tab-terbaru" onClick="javascript: $('#tab-terbaru .page-cur').text(parseInt($('#tab-terbaru .page-cur').text()) + 1);
                            changePage('terbaru');" class="page-next">>></a>
                </div>
            </div>
        </div>
    </div>
    <div class="side-right">
        <style type="text/css">
            .galeribox {
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                border: 1px solid #d4ccb0;
                background-color: #fbfaf3;
                padding: 1em;
            }

            .bigpic {
                width: 100%;
                max-height: 400px;
                border: 1px solid black;
                margin-bottom: 1em;
            }
            .smallpic {
                width: 48%;
                max-height: 200px;
                border: 1px solid black;
                margin: 1px;
            }
        </style>
        <div class="title" style="margin-bottom: 0.3em;">Galeri</div>
        <div class="galeribox">
        </div>
    </div>
</div>
<div id="popupContainer" class="hidden">
    <h2 style="margin: 0px; margin-bottom: 5px;">Title</h2>
    <div class="content" style="padding: 0px;">content</div>
    <div class="link"><a>Info Detail...</a></div>
</div>
<script type="text/javascript">
                        var map, selectedFeature, selectControl;

                        jQuery(document).ready(function() {
                            $(".beritabox").tabs({
                                beforeLoad: function(event, ui) {
                                    ui.jqXHR.error(function() {
                                        ui.panel.html(
                                                "Couldn't load this tab. We'll try to fix this as soon as possible. " +
                                                "If this wouldn't be a demo.");
                                    });
                                }
                            });

                            fetchGal();

                            map = createMapExplorer("map", true);

                            // The overlay layer for our marker, with a simple diamond as symbol
                            var overlay = new OpenLayers.Layer.Vector('Overlay', {
                                styleMap: new OpenLayers.StyleMap({
                                    externalGraphic: '<?php echo res_url("img/marker.png"); ?>',
                                    graphicWidth: 20, graphicHeight: 24, graphicYOffset: -24,
                                    title: '${tooltip}'})
                            });
                            // control
                            selectControl = new OpenLayers.Control.SelectFeature(overlay, {
                                onSelect: onFeatureSelect,
                                onUnselect: onFeatureUnselect,
                                autoActivate: true
                            });

                            var kabList = [];
<?php
if (count($kabList) > 0) {
    echo "kabList = " . json_encode($kabList);
}
?>

                            for (var i = 0; i < kabList.length; i++) {
                                var kabLoc = new OpenLayers.Geometry.Point(kabList[i].longlatitude, kabList[i].latitude)
                                        .transform(map.displayProjection, map.projection);
                                overlay.addFeatures([
                                    new OpenLayers.Feature.Vector(kabLoc, {tooltip: kabList[i].display_name, data: kabList[i]})
                                ]);
                            }
                            map.addLayers([overlay]);
                            map.addControl(selectControl);
                            map.setCenter(new OpenLayers.LonLat(120, -2.5).transform(
                                    map.displayProjection,
                                    map.projection), 4);
                        });
                        function showFeatures() {
                            var edLayer = map.getLayersByName("Editable")[0];
                            var features = edLayer.features;
                            $("#geocont").html("");
                            for (var i = 0; i < features.length; i++) {
                                $("#geocont").append(features[i].geometry.toString());
                            }
                        }
                        function onPopupClose(evt) {
                            selectControl.unselect(selectedFeature);
                        }
                        function onFeatureSelect(feature) {
                            selectedFeature = feature;
                            var kabupaten = feature.attributes.data;
                            $("#popupContainer h2").text(kabupaten.display_name);
                            $("#popupContainer .content").html(kabupaten.generated_summary);
                            $("#popupContainer .link a").prop("href", "<?php echo site_url("profildt/detail/kab"); ?>/" + kabupaten.code);
                            popup = new OpenLayers.Popup.FramedCloud("chicken",
                                    feature.geometry.getBounds().getCenterLonLat(), null,
                                    $("#popupContainer").html(),
                                    null, true, onPopupClose);
                            popup.panMapIfOutOfView = false;
                            feature.popup = popup;
                            map.addPopup(popup);
                        }
                        function onFeatureUnselect(feature) {
                            map.removePopup(feature.popup);
                            feature.popup.destroy();
                            feature.popup = null;
                        }

                        function fetchGal() {
                            $(".galeribox").html("");
                            $.ajax({
                                url: "<?php echo site_url("service/getDataJSON/galpop"); ?>",
                                method: "POST",
                                dataType: "json", data: {
                                    page: 0,
                                    perpage: 1
                                },
                                success: function(data) {
                                    if (data.length > 0) {
                                        img = data[0];
                                        $(".galeribox").append("<img alt='" + img.judul + "' src='" + img.src + "' class='bigpic'/>");
                                        $.ajax({
                                            url: "<?php echo site_url("service/getDataJSON/galbar"); ?>",
                                            method: "POST",
                                            dataType: "json", data: {
                                                page: 0,
                                                perpage: 4
                                            },
                                            success: function(data) {
                                                if (data.length > 0) {
                                                    for (var i = 0; i < data.length; i++) {
                                                        img = data[i];
                                                        $(".galeribox").append("<img alt='" + img.judul + "' src='" + img.src + "' class='smallpic'/>");
                                                    }
                                                }
                                            }
                                        });
                                    }
                                }
                            });
                        }
</script>